iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0

當我們部屬好自己的前端Angular專案與後端.net Core API到Azure後

一定會需要從我們自己的前端撈後端的資料

這時候想必一定會遇到CORS的問題

https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Server-Side_Access_Control

跨來源資源共用(Cross-Origin Resource Sharing (CORS))是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理取得存取其他來源(網域)伺服器特定資源權限的機制。當使用者代理請求一個不是目前文件來源——例如來自於不同網域(domain)、通訊協定(protocol)或通訊埠(port)的資源時,會建立一個跨來源 HTTP 請求(cross-origin HTTP request)

這問題困擾我很多次所以要來一天介紹

之前我們在Angular使用http撈資料時,因為跨域撈資料了所以產生CORS問題
No 'Access-Control-Allow-Origin' header is present on the requested resource.
那時候是參考這篇來解決的,不過現在將程式部屬到網路上了,就不能再依靠瀏覽器的安全性設定來檢視網頁

所以我們就要針對前端與後端去做設定

參考了各大文章,前端與後端的設定分別如下

前端

前端需要在http呼叫時間的header下手腳,這樣後端API才懂

並在http呼叫的時候,將header參數一起丟進去

programs.service.ts

public httpOptions = {
    headers: new HttpHeaders({
      'Access-Control-Allow-Origin': 後端API的Domain,
      'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
      'Access-Control-Max-Age': '86400'
    })
  };
  public getBackendData(
  ): Observable<any> {
    const getURL = 後端API的Domain/api/user/GetAllUser;
    return this.http.get<any>(getURL, this.httpOptions);  
  }

後端

在StartUp.cs中,找到ConfigureServices

 public void ConfigureServices(IServiceCollection services)
   {
        services.AddCors(options =>
       {
        // CorsPolicy 是自訂的 Policy 名稱
        options.AddPolicy("CorsPolicy", policy =>
          {
            policy.AllowAnyOrigin().SetPreflightMaxAge(new TimeSpan(86400))
                     .AllowAnyHeader() //這邊是自己要用的,先允許全部了
                     //.WithOrigins("http://localhost:3000") 可以指定哪個前端網頁才能呼叫
                     .AllowAnyMethod()
                     .AllowCredentials();
            });
       });
           
   }

接著在Configure中,不論測試還是正式環境,都加上app.UseCors("CorsPolicy");

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseCors("CorsPolicy"); 
            }
            else
            {
                app.UseHsts();
                app.UseCors("CorsPolicy");
            }

            app.UseHttpsRedirection();
            app.UseMvc();
        }

這樣就搞定了

參考資料

https://ithelp.ithome.com.tw/articles/10207546
https://blog.johnwu.cc/article/ironman-day26-asp-net-core-cross-origin-requests.html
https://blog.toright.com/posts/3205/%E5%AF%A6%E4%BD%9C-cross-origin-resource-sharing-cros-%E8%A7%A3%E6%B1%BA-ajax-%E7%99%BC%E9%80%81%E8%B7%A8%E7%B6%B2%E5%9F%9F%E5%AD%98%E5%8F%96-request.html


上一篇
Day 23 Angular專案部屬至Azure
下一篇
Day 25 AngularTri實作-台灣三鐵比賽
系列文
三十天利用Angular與.net Core開發實戰一波32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言